import React from 'react';
import { Typography, Row, Col, Card, Button, Statistic} from 'antd';
import { CodeOutlined, DatabaseOutlined, RobotOutlined, TrophyOutlined, TeamOutlined, ProjectOutlined } from '@ant-design/icons';
import { Parallax } from 'react-scroll-parallax';
import { useOutletContext } from 'react-router-dom';
import './style.less';

const { Title, Paragraph } = Typography

const HomePage: React.FC = () => {
  // 获取从MainLayout传递的ref
  const { aboutRef } = useOutletContext<{ aboutRef: React.RefObject<HTMLDivElement> }>();
  
  // 研究方向数据
  const researchDirections = [
    {
      title: '前端开发',
      icon: <CodeOutlined className="direction-icon" />,
      description:
        '专注于现代Web开发技术体系,涵盖HTML5、CSS3、JavaScript等核心技术，深入学习React、Vue等主流框架。专注于现代Web前端技术研究，培养响应式设计、性能优化和用户体验设计能力，让你能够构建美观、高效的现代化Web应用。',
    },
    {
      title: '后端开发',
      icon: <DatabaseOutlined className="direction-icon" />,
      description:
        '专注于服务器端开发技术，重点培养Java和Go语言开发能力。课程涵盖微服务架构、分布式系统设计、数据库优化和高并发处理，让你掌握构建稳定、高效、可扩展后端系统的核心技术。',
    },
    {
      title: '人工智能',
      icon: <RobotOutlined className="direction-icon" />,
      description:
        '专注于机器学习、深度学习和数据科学领域，重点培养Python编程、PyTorch框架应用能力。涵盖自然语言处理、计算机视觉、大模型问答等前沿技术，让你站在人工智能技术发展的最前沿。',
    },
  ]

  // 实验室成果数据
  const labAchievements = [
    { title: '技术分享文', value: 42, suffix: '篇' },
    { title: '优秀就业', value: 49, suffix: '人' },
    { title: '软著专利', value: 5, suffix: '个' },
    { title: '获奖项目', value: 15, suffix: '个' },
  ]

  return (
    <div className="home-container">
      {/* 顶部横幅 */}
      <div className="hero-banner">
        <Parallax translateY={[-20, 20]}>
          <div className="hero-content" data-aos="fade-up">
            <h1>西邮EPI软件实验室</h1>
            <p>为精英提供机会，让机会造就大师</p>
            {/* 使用平滑滚动到实验室简介 */}
            <Button
              type="primary"
              size="large"
              shape="round"
              className="hero-button"
              onClick={() => aboutRef?.current?.scrollIntoView({ behavior: 'smooth' })}
            >
              了解更多
            </Button>
          </div>
        </Parallax>
      </div>

      {/* 实验室简介 - 绑定ref */}
      <div 
        id='introduction' 
        ref={aboutRef}  // 将ref绑定到实验室简介元素
        className="lab-intro" 
        data-aos="fade-up" 
        style={{ scrollMarginTop: '115px' }}
      >
        <Title level={2}>
          <span className="title-decorator"></span>
          实验室简介
          <span className="title-decorator"></span>
        </Title>
        <Row gutter={[24, 24]} align="middle">
          <Col xs={24} md={12}>
            <div className="intro-image-container" data-aos="fade-right">
              <div className="intro-image"></div>
              <div className="intro-image-decorator"></div>
            </div>
          </Col>
          <Col xs={24} md={12}>
            <div data-aos="fade-left">
              <Paragraph className="intro-paragraph">
                EPI软件实验室是西部创新创业基地下的高水平技术团队，专注于软件开发与技术创新领域。我们汇聚了
                一群热爱编程、追求卓越的技术爱好者，致力于打造一流的技术学习与项目开发环境，为西邮学子提供
                优质的成长平台。
              </Paragraph>
              <Paragraph className="intro-paragraph">
                为了帮助每一位大一新生明确学习方向，我们汇集了历届学长学姐的宝贵经验，精心
                编写了属于各个方向的培养方案。我们的目标是为西邮人、EPI人提供清晰的学习路径，让大家能够快速
                进入对应领域的学习，最大限度减少初学阶段的迷茫和不知所措。
                通过定期技术分享、项目实践、竞赛
                指导和职业规划，我们帮助每一位成员在技术深度和广度上同步成长，为未来的职业生涯或深造之路奠
                定坚实基础。
              </Paragraph>
            </div>
          </Col>
        </Row>
      </div>

      {/* 研究方向 */}
      <div className="research-directions" data-aos="fade-up">
        <Title level={2}>
          <span className="title-decorator"></span>
          研究方向
          <span className="title-decorator"></span>
        </Title>
        <Row gutter={[24, 24]}>
          {researchDirections.map((direction, index) => (
            <Col xs={24} sm={24} md={8} key={index}>
              <Card
                className="direction-card"
                hoverable
                data-aos="zoom-in"
                data-aos-delay={index * 100}
              >
                <div className="direction-icon-container">{direction.icon}</div>
                <Title level={3}>{direction.title}</Title>
                <Paragraph>{direction.description}</Paragraph>
                <Button 
                  type="link" 
                  className="learn-more-btn" 
                  onClick={() => {
                    document.getElementById('core-advantages')?.scrollIntoView({
                      behavior: 'smooth'
                    });
                  }}
                >
                  了解更多 →
                </Button>
              </Card>
            </Col>
          ))}
        </Row>
      </div>

      {/* 实验室成果 */}
      <div id="achievements" className="lab-achievements" data-aos="fade-up">
        <Parallax speed={-5}>
          <div className="achievements-content">
            <Title level={2}>
              <span className="title-decorator"></span>
              实验室成果
              <span className="title-decorator"></span>
            </Title>
            <Row gutter={[24, 24]}>
              {labAchievements.map((achievement, index) => (
                <Col xs={12} sm={12} md={6} key={index}>
                  <Card
                    className="achievement-card"
                    data-aos="flip-up"
                    data-aos-delay={index * 100}
                  >
                    <Statistic
                      title={achievement.title}
                      value={achievement.value}
                      suffix={achievement.suffix}
                      valueStyle={{ color: '#4e54c8' }}
                    />
                  </Card>
                </Col>
              ))}
            </Row>
          </div>
        </Parallax>
      </div>

      {/* 核心优势 */}
      <div id="core-advantages" className="core-advantages" data-aos="fade-up">
        <Title level={2}>
          <span className="title-decorator"></span>
          核心优势
          <span className="title-decorator"></span>
        </Title>
        <Row gutter={[24, 24]}>
          <Col xs={24} md={8}>
            <Card className="advantage-card" data-aos="fade-right">
              <TeamOutlined className="advantage-icon" />
              <Title level={3}>优秀团队</Title>
              <Paragraph>
                由经验丰富的教师和充满活力的学生组成，跨方向合作，优势互补。
              </Paragraph>
            </Card>
          </Col>
          <Col xs={24} md={8}>
            <Card className="advantage-card" data-aos="fade-up">
              <ProjectOutlined className="advantage-icon" />
              <Title level={3}>实战项目</Title>
              <Paragraph>
                参与真实项目开发，与实验室成员共同合作，理论与实践紧密结合。
              </Paragraph>
            </Card>
          </Col>
          <Col xs={24} md={8}>
            <Card className="advantage-card" data-aos="fade-left">
              <TrophyOutlined className="advantage-icon" />
              <Title level={3}>创新成果</Title>
              <Paragraph>
                鼓励创新思维，产出高质量研究成果，多次获得国家级奖项。
              </Paragraph>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default HomePage
    